<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import {
  taskProgressAdd,
  taskProgressFind,
  taskProgressFindById,
  taskProgressModify,
  taskProgressRemove
} from '@/api/projectItem/taskProgress'
import { Modal } from '@arco-design/web-vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 搜索表单
const searchForm = reactive({
  // 显示控制
  visible: true,
  // 表单
  form: {
    projectItemID: Number(route.query.id)  //ProjectItemID
  },
  // 搜索
  search: () => {
    console.log(searchForm.form)
    taskProgressFind(searchForm.form,
      searchForm.list.pageSize,
      searchForm.list.pageNum
    ).then((resp: any) => {
      searchForm.list = resp.data
    })
  },
  // table 数据
  list: {
    list: [],
    total: 0,
    pageSize: 10,
    pageNum: 1
  }
})

// 操作数据表单
const operationForm = reactive({
  // 弹框标题
  title: '添加任务进度',
  // 是否显示
  visible: false,
  // 表单
  form: {
    id: null,  //Id
    projectItemID: Number(route.query.id),  //ProjectItemID
    title: null,  //任务标题
    content: null,  //任务内容
    createTime: null,  //创建日期
    progress: null  //任务进度
  },
  // 验证
  rules: {},
  reset: () => {
    operationForm.form = {
      id: null,  //Id
      projectItemID: Number(route.query.id),  //ProjectItemID
      title: null,  //任务标题
      content: null,  //任务内容
      createTime: null,  //创建日期
      progress: null  //任务进度
    }
  },
  // 打开弹框
  open: () => {
    operationForm.title = '添加任务进度'
    operationForm.visible = true
    operationForm.reset()
  },
  modify: (record: any) => {
    operationForm.title = '修改任务进度'
    taskProgressFindById(record.id).then(resp => {
      operationForm.form = resp.data
      operationForm.visible = true
    })
  },
  remove: (record: any) => {
    Modal.confirm({
      title: '警告！',
      content: `是否确认删除 [${record.id}] 任务进度？`,
      onOk(e) {
        taskProgressRemove(record.id).then(() => searchForm.search())
      }
    })
  },
  submit: ({ errors, values }: any) => {
    if (errors) return
    if (values.id) {
      taskProgressModify(operationForm.form).then(() => {
        operationForm.visible = false
        searchForm.search()
      })
      return
    }

    taskProgressAdd(values).then(() => {
      operationForm.visible = false
      searchForm.search()
    })
  }
})

onMounted(() => {
  searchForm.search()
  document.title = `Rocc管理系统 任务-${route.query.name}`
})

</script>

<template>
  <div class="w-full h-full">


    <!-- 功能区域 -->
    <div class="flex justify-between mr-1">
      <a-space wrap>
        <a-button type="primary" @click="operationForm.open">
          <template #icon>
            <icon-plus />
          </template>
          添加任务进度
        </a-button>
        <a-button>
          <template #icon>
            <icon-download />
          </template>
          导出任务进度
        </a-button>
      </a-space>
      <a-space>
        <a-tooltip content="刷新列表" @click="searchForm.search" position="tr">
          <a-button size="small" shape="circle">
            <template #icon>
              <icon-refresh />
            </template>
          </a-button>
        </a-tooltip>

      </a-space>
      <!-- 功能区域end -->
    </div>

    <!-- 表单区域 -->
    <a-drawer v-model:visible="operationForm.visible" :title="operationForm.title" :width="500" :footer="false">
      <a-form ref="operationFormRef" :model="operationForm.form" @submit="operationForm.submit"
              :rules="operationForm.rules">
        <a-form-item hide-asterisk label="任务标题" field="title" validate-trigger="blur">
          <a-input v-model="operationForm.form.title" :disabled="operationForm.form.progress! > 0.00" />
        </a-form-item>
        <a-form-item hide-asterisk label="任务进度" field="progress" validate-trigger="blur">
          <a-input-number :max="100.00" :min="0.00" v-model="operationForm.form.progress" />
        </a-form-item>
        <a-form-item hide-asterisk label="内容 / 进展" field="content" validate-trigger="blur">
          <a-textarea v-model="operationForm.form.content" :auto-size="{minRows:15,maxRows: 15}" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>

    <a-table :data="searchForm.list.list" :pagination="false"
             @cell-click="(record)=>Modal.info({title:record.title,width: 600,content: record.content})">
      <template #columns>
        <a-table-column title="Id" data-index="id" width="80" />
        <a-table-column title="任务标题" data-index="title" width="180" ellipsis />
        <a-table-column title="任务内容" data-index="content" ellipsis width="430" />
        <a-table-column title="任务进度" data-index="progress" width="300">
          <template #cell="{record}">
            <a-progress :percent="record.progress /100.00" />
          </template>
        </a-table-column>
        <a-table-column title="创建日期" data-index="createTime" width="180" />
        <a-table-column title="操作" width="160">
          <template #cell="{record}">
            <a-space>
              <a-button status="warning" @click.stop="operationForm.modify(record)" :disabled="record.progress == 100">
                <template #icon>
                  <icon-edit />
                </template>
                修改
              </a-button>
              <a-button status="danger" @click.stop="operationForm.remove(record)" :disabled="record.progress == 100">
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <div class="mt-4 flex justify-end">
      <a-pagination v-model:current="searchForm.list.pageNum"
                    v-model:page-size="searchForm.list.pageSize"
                    :total="searchForm.list.total"
                    @change="searchForm.search"
                    show-total
                    show-jumper
                    show-page-size
      ></a-pagination>
    </div>
  </div>
</template>

<style scoped>

</style>
